<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1" charset="utf-8">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
        <script src="../js/txtscroll.js"></script>
        <link rel="stylesheet" type="text/css" href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.13.1/css/all.css" />
        <!-- 提示消息 -->
        <link rel="stylesheet" href="../scripts/jquerymessage/css/message.min.css">
        <script src="../scripts/jquerymessage/js/message.min.js"></script>
        <!-- 格式按钮炫炫酷效果 -->
        <link rel="stylesheet" type="text/css" href="/css/hover.css" />
        <style>
            .txt-scroll{
                /*background-color: rgba(0,0,0,0.5); */
                background-image: url(/images/ico-notice.png);
                background-position: 10px center;
                background-repeat: no-repeat; font-weight: bold;
            }
            /*txt-scroll*/
            .txt-scroll{
                width: 100%;
                height: 30px;
                line-height: 30px;
                padding: 0 5px 0 30px;
            }
            .txt-scroll .scrollbox{ width: 100%; white-space: nowrap; overflow:hidden; transition: all .2s; }
            .txt-scroll .txt,
            .txt-scroll .txt-clone{ display: inline; position: relative; }

            span a {
                text-decoration:none;
                color: #fc6423;
                padding: 4px;
                border-style: double;
                border-color: #ff7600;
            }


            .tangseng {
                position: absolute;
                top: 30px;
                /*right: 310px;*/
                left:10%;
                background: url(https://static.xiaosige.com/img/xiyouji/tangseng.png) 0 0 no-repeat;
                z-index: 999999;
                width: 170px;
                height: 240px;
                animation: tszou 1s steps(8) infinite;
                -webkit-animation: tszou 1s steps(8) infinite;
                -moz-animation: tszou 1s steps(8) infinite;
                -o-animation: tszou 1s steps(8) infinite;
            }

            @keyframes tszou {
                to {
                    background-position: -1360px 0;
                }
            }

            @-webkit-keyframes tszou {
                to {
                    background-position: -1360px 0;
                }
            }

            @-moz-keyframes tszou {
                to {
                    background-position: -1360px 0;
                }
            }

            @-o-keyframes tszou {
                to {
                    background-position: -1360px 0;
                }
            }

            .wukong{
                position: fixed;
                right: 0;
                bottom: 200px;
                z-index: 999999;
                animation: mymove 5s infinite ease-in-out;
            }
            @keyframes mymove {
                0% {
                    bottom: 180px;
                }
                50% {
                    bottom: 100px;
                }
                100% {
                    bottom: 180px;
                }
            }

            .wukong .wukong-img{
                width: 150px;
                height: 150px;
                overflow: hidden;
            }
            .wukong-img img{
                width: 150px;
                height: 150px;
            }

            .bajie {
                position: absolute;
                top: 60px;
                /*right: 458px;*/
                left:35%;
                background: url(https://static.xiaosige.com/img/xiyouji/bajie.png) 0 0 no-repeat;
                z-index: 999999;
                width: 200px;
                height: 180px;
                animation: bjzou 1s steps(8) infinite;
                /*! -webkit-animation: bjzou 1s steps(8) infinite; */
                /*! -moz-animation: bjzou 1s steps(8) infinite; */
                -o-animation: bjzou 1s steps(8) infinite;
            }

            @keyframes bjzou {
                to {
                    background-position: -1600px 0;
                }
            }

            @-webkit-keyframes bjzou {
                to {
                    background-position: -1600px 0;
                }
            }

            @-moz-keyframes bjzou {
                to {
                    background-position: -1600px 0;
                }
            }

            @-o-keyframes bjzou {
                to {
                    background-position: -1600px 0;
                }
            }

            .shaseng {
                position: absolute;
                top: 60px;
                /*right: 100px;*/
                left:55%;
                background: url(https://static.xiaosige.com/img/xiyouji/shaseng.png) 0 0 no-repeat;
                z-index: 999999;
                width: 210px;
                height: 200px;
                animation: sszou 1s steps(8) infinite;
                -webkit-animation: sszou 1s steps(8) infinite;
                -moz-animation: sszou 1s steps(8) infinite;
                -o-animation: sszou 1s steps(8) infinite;
            }

            @keyframes sszou {
                to {
                    background-position: -1680px 0;
                }
            }

            @-webkit-keyframes sszou {
                to {
                    background-position: -1680px 0;
                }
            }

            @-moz-keyframes sszou {
                to {
                    background-position: -1680px 0;
                }
            }

            @-o-keyframes sszou {
                to {
                    background-position: -1680px 0;
                }
            }

        </style>
    </head>
    <body>

        <div style="position :absolute;width: 100%;text-align: center;height:40px;top:10px;">
            <div class="txt-scroll">
                <div class="scrollbox">
                    <div class="txt">
                        欢迎光临小四儿站点。好脑瓜不如烂笔头，本站为个人日常知识点、生活趣事记录，有任何不妥的地方，请及时联系本人（<span style="color: #f37055">leeze0216@163.com</span>），欢迎批评指正。
                    </div>
                </div>
            </div>
        </div>

        <div style="position :absolute;width: 100%;text-align: center;height:auto;">
            <div class="wukong">
                <div class="wukong-img">
                    <img src="https://static.xiaosige.com/img/xiyouji/wukong.png">
                </div>
            </div>
            <div class="bajie"></div>
            <div class="tangseng"></div>
            <div class="shaseng"></div>
        </div>

        <div style="position:absolute;bottom:50px;width:100%;text-align: center;color: #fc6423;font-family: 'Palatino Linotype','Book Antiqua',Palatino,STKaiti,KaiTi,SimKai,DFKai-SB,'Lato','PingFang SC','Microsoft YaHei',sans-serif;font-size: 20px;">
            <span>妖怪（BUG）哪里走</span>
        </div>

        <div style="position :absolute;width: 100%;text-align: center;height:40px;bottom:10px;">
            <span class="text-qj" style="padding-right:20px;font-size:30px;color:#fc6423;font-weight:bold;font-family:'Palatino Linotype','Book Antiqua',Palatino,STKaiti,KaiTi,SimKai,DFKai-SB,'Lato','PingFang SC','Microsoft YaHei',sans-serif;font-weight:900;">
            古有取经僧
            </span>
            <span style="display: none;">
                <a href="/covid19" class="hvr-radial-out" target="_blank"><i class="fa fa-heartbeat fa-fw"></i>疫情图</a>
            </span>
            <span>
                <a href="/stars" class="hvr-bounce-to-bottom" onclick="parent.location.href='/stars' "><i class="fa fa-star fa-fw"></i>我的收藏</a>
            </span>
            <span>
                <a href="/localdev" class="hvr-bounce-to-top" onclick="parent.location.href='/localdev' "><i class="fab fa-dev fa-fw"></i>个人开发</a>
            </span>
            <span class="text-mn" style="padding-left:20px;font-size:30px;color:#fc6423;font-weight:bold;font-family:'Palatino Linotype','Book Antiqua',Palatino,STKaiti,KaiTi,SimKai,DFKai-SB,'Lato','PingFang SC','Microsoft YaHei',sans-serif;font-weight:900;">
            今有码农人
            </span>
        </div>

        <script>
            $(document).ready(function(){
                <!-- 移动端 wukong -->
                if (/(iPhone|iPad|iPod|iOS|Android)/i.test(navigator.userAgent)) {
                    $('.wukong').css('display','none');
                    $('.text-qj').css('display','none');
                    $('.text-mn').css('display','none');
                    $('.tangseng').css('left','1%');
                }
                $('.txt-scroll').txtscroll({
                    'speed': 50
                });
                let _config = {
                    /*** 多少毫秒后关闭 <= 0 不关* @type {Number}*/
                    duration: 5000,
                    /**    * 背景色     * @type {boolean|string}   */
                    background: false,
                    /**    * 前景色  * @type {null|string}    */
                    color: null,
                    /**  * 提示内容 * @type {string}             */
                    content: '欢迎光临。。。',
                    /**   * 关闭时回调    * @type {null|Function}  */
                    onclose: null, // 图标
                    icon: '',
                    /** * 自动关闭时 延迟多久后移除 * @type {number}  */
                    animate_duration: 500,
                    /**  * 是否开启关闭按钮    * @type {boolean} */
                    closable: false,
                    /** * 头部* @type {boolean|string} bool = false */
                    header: false,
                    /** * 标题 与 header 二者只能存其一 header 高于 title * @type {boolean|string} bool = false */
                    title: false,
                    /*** 底部* @type {boolean|string} bool = false*/
                    footer: false,
                    /*** 底部确认按钮 用户点击回调 * @type {boolean|Function} bool = false */
                    confirm: function(cb) {
                        cb();
                    },
                    /**  * 底部确认按钮文字  * @type {string} */
                    confirm_text: '确认',
                    /**  * 底部取消按钮 用户点击回调 * @type {boolean|Function} bool = false */
                    cancel: function(cb) {
                        cb();
                    },
                    /** * 底部取消按钮文字* @type {string} */
                    cancel_text: '取消',
                    /** *  宽度 高度  *  @type {Array} ar[0] = 宽 ar[1] = 高 */
                    area: [],
                    /**   * 是否开启遮罩 * @type {boolean}  */
                    mask: false,
                    /**  * 父节点  * 父节点不存在会默认创建一个* @type {jQuery|string|HTMLElement|null|boolean} string = selector  */
                    parent: null,
                    /** * 是否移除父节点  * @type {boolean}  */
                    remove_parent: false,
                    /**             * 位置
                     * @type {string} css class
                     * 目前有  vt-right-top、vt-left-top、vt-top-center、vt-left-center、
                     * vt-center-center、vt-right-center、vt-left-bottom、vt-bottom-center、
                     * vt-right-bottom
                     * 其中 vt-right-top、vt-left-top、vt-top-center 默认没有使用 position: fixed
                     * 如果需要使用 则加上 vt-fixed，如： vt-right-top vt-fixed
                     * 每一个位置 css class 都有一个  同级 .vt-remove
                     * 该参数最终会传递给 $.addClass()
                     */
                    offset: 'vt-top-center vt-fixed',
                    /** * 样式* @type {null|Object} */
                    style: null,
                };
                VtMessage.info(_config);
                let mp3Url = "/zone/tool/yinxiao/welcome.mp3";
                let player = new Audio(mp3Url);
                let countWel = 0;

                //暂停
                //player.pause();
                //player.load();

                document.body.addEventListener('mousedown', function(){
                    //var vdo = $("video")[0]; //jquery
                    //vdo.muted = false;
                    if(countWel == 0){
                        player.play(); //播放 mp3这个音频对象
                    }
                    countWel++;

                }, false);

            });
        </script>
    </body>
</html>